<!--
 * @Descripttion:
 * @version:
 * @Author: ljl
 * @Date: 2020-05-22 21:38:57
 * @LastEditors: ljl
 * @LastEditTime: 2020-05-27 23:40:17
-->
<template>
  <div class="dashboard">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="监控视频" name="first">
          <div class="video">
            <div class="left">
              <video-player
                ref="videoPlayer"
                class="video-player vjs-custom-skin"
                :playsinline="true"
                :options="videoOptions"
              />
            </div>
            <div class="right">
              <!-- <div class="span">全屏</div> -->
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="视频回放" name="second">
          <playback />
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
// import playback from './playback'
import screenfull from 'screenfull'

export default {
  name: 'Video',
  components: {
    // playback
  },
  data() {
    return {
      activeName: 'first',
      // 默认不全屏
      isFullscreen: false,
      videoOptions: {

      }
    }
  },
  mounted() {
    this.player()
  },
  beforeDestroy() {
    // this.player.destory()
  },
  destroyed() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      if (!screenfull.isEnabled) {
        this.$message('您的浏览器不能全屏')
        return false
      }
      screenfull.toggle()
    },
    player() {
      this.videoOptions = {
        live: true,
        autoplay: true,
        fluid: true,
        // notSupportedMessage: '暂时无法播放',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        // techOrder: ['flash'],
        sources: [{
          // type: 'rtmp/mp4',
          // src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
          // withCredentials: false
          type: 'video/mp4',
          src: require('../../assets/images/video.mp4')
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  margin: 21px 18px 0 18px;
  .video{
    display: flex;
    div{
      flex: 1;
    }
    .left{
      flex-grow: 5;
      height: 600px;
    }
    .right{
      flex-grow: 1;
      .span{
        background:rgba(210,154,0,1);
        border-radius:2px;
        text-align: center;
        width: 60px;
        height: 32px;
        line-height: 2;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  div{
    width:100%;
    background:rgba(23, 27, 35, 0.36);
    margin-right: 15px;
  }
}
.demo-video {
    max-width: 880px;
    max-height: 660px;
}
</style>
